<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<scroll-view scroll-y class="content" :style="{height:pageHeight}" @scrolltolower='scrolltolower'
		@scrolltoupper='scrolltoupper'>

		<view class="top-img" v-for="item in imglist[0]" :key="item.id">
			<image :src="'https://df.chitong.cn/uploads/' + item.image" mode="widthFix" class="topimg">
		</view>
		<!-- 11{{'https://df.chitong.cn/uploads/' + vidoe.video_url}} -->
		<view class="contents">
			<!-- 图片 中 -->
			<view class="list">
				<img v-for="(i,k) in imglist[1]" :key="i.id" :src="'https://df.chitong.cn/uploads/' + i.image"
					@click="climg(k)">
			</view>
			<!-- 视频 -->
			<video id="myVideo" :src="vidoe.video_url" autoplay custom-cache="true"
				controls></video>
			<view class="table">
				<view class="gaga">
					<img src="../../static/img/index/kuang.png">
				</view>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="ta">
						<text class="tx">学生姓名</text><text class="txx">*</text><br>
						<view class="inp">
							<input type="text" @focus="focus" @blur="blur" :adjust-position="false" placeholder="请输入学生姓名" v-model="list.name">
						</view>
					</view>
					<view class="ta">
						<text class="tx">学生身份证号</text><text class="txx">*</text><br>
						<view class="inp">
							<input type="text" @focus="focus" @blur="blur" :adjust-position="false" placeholder="请输入学生18位身份证号" v-model="list.id">
						</view>
					</view>
					<view class="ta">
						<text class="tx">家长姓名</text><text class="txx">*</text><br>
						<view class="inp">
							<input type="text" @focus="focus" @blur="blur" :adjust-position="false" placeholder="请输入家长姓名" v-model="list.jzname">
						</view>
					</view>
					<view class="ta">
						<text class="tx">联系方式</text><text class="txx">*</text><br>
						<view class="inp">
							<input type="text" @focus="focus" @blur="blur" :adjust-position="false" placeholder="请输入家长的手机号" v-model="list.mod">
						</view>
					</view>
					<view class="ta">
						<text class="tx">学生所在学校</text><text class="txx">*</text><br>
						<view class="inp" @click="open(2)">
							<input type="text" :adjust-position="false" placeholder="请选择学生所在学校" disabled
								v-model="list.school">
						</view>
					</view>
					<view class="ta">
						<text class="tx">学生所在年级</text><text class="txx">*</text><br>
						<view class="inp" @click="open(0)">
							<input type="text" :adjust-position="false" placeholder="请选择学生所在年级" disabled
								v-model="list.grade">
						</view>
					</view>
					<view class="ta">
						<text class="tx">学生所在班级</text><text class="txx">*</text><br>
						<view class="inp" @click="open(1)">
							<input type="text" :adjust-position="false" placeholder="请选择学生所在班级" disabled
								v-model="list.classs">
						</view>
					</view>

					<!-- 				<view class="ta">
					<text class="tx">学生所在班级</text><text class="txx">*</text><br>
					<view class="inp">
						<input type="text" placeholder="请选择学生所在班级" v-model="list.classs">
					</view>
				</view> -->
					<view class="ta">
						<text class="tx txtj">满足费用全免政策证明附件上传<text class="txs">(选传)</text></text><br>
						<img class="zj" v-show="!certificate" src="@/static/img/index/zj.png" @click="updata">
						<img class="zj" v-if="certificate" :src="'https://df.chitong.cn/uploads/' + certificate">
					</view>
					<view class="clause ta">
						<img src="@/static/img/index/dui0.png" v-show="!isxy" @click="isxy=true">
						<img src="@/static/img/index/dui1.png" v-show="isxy" @click="isxy=false">
						<text class="tx1">我已阅读</text>
						<text class="tx2" @click="gotx(0)">《劳动实践研学收费标准与协议》</text>
						<text class="tx2" @click="gotx(1)">《用户服务协议》</text>
						<text class="tx2" @click="gotx(2)">《隐私协议》</text>
					</view>
					<button type="default" v-if="!islogin" class="but ta" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber" :disabled="isPhoneDisable">获取手机号</button>
					<button type="primary" class="btn ta" v-if="islogin" @click="gopay">立即报名支付</button>
					<view class="comment">
						注：选择学生所在年级后，自动获取报名费
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="bottoms">
			<text class="top">扫码关注了解更多</text><br>
			<text class="top1">普定沙湾劳动实践研学基地</text>
			<view class="imgs">
				<img v-for="(i,k) in imglist[2]" wx:key="k" :src="'https://df.chitong.cn/uploads/' + i.image ">
			</view>
			<view style="color: #333; font-size: 24rpx; margin-top: 20rpx;">
				<view>联系人：周老师</view>
				<view>联系方式：19985037571</view>
				<view style="margin: 10rpx 0;">地址：安顺市普定县定南街道陇财村</view>
				<view>欢迎各中小学学生前来参观学习</view>
			</view>
		</view>
		<view class="all">
			<text>最终解释权归沙湾劳动实践研学基地所有</text><br>
			<text class="tx">©贵州卫鑫达文旅发展有限公司版权所有</text>
		</view>
		<view class="down" v-if="!isUnder">
			<image src="../../static/img/index/down.gif" mode=""></image>
		</view>
		<!-- 学校弹出框 -->
		<uni-popup ref="school" bottom @change="change">
			<view class="pop-up">
				<view class="dis">
					<text @click="qx2">取消</text>
					<text class="tx1" @click="determine(2)">确定</text>
				</view>
				<scroll-view scroll-y="true" style="height: 585rpx;">
					<view class="list" :class="gradeKey==index?'listselect':''" v-for="(item,index) in schoolList"
						:key="index" @click="gradeKey = index">
						{{item.title}}
					</view>
				</scroll-view>

			</view>
		</uni-popup>
		<!-- 年级弹出框 -->
		<uni-popup ref="popup" bottom @change="change">
			<view class="pop-up">
				<view class="dis">
					<text @click="qx">取消</text>
					<text class="tx1" @click="determine(0)">确定</text>
				</view>
				<scroll-view scroll-y="true" style="height: 585rpx;">
					<view class="list" :class="gradeKey==k?'listselect':''" v-for="(i,k) in grade" :key="k"
						@click="gradeKey = k">
						{{i.title}}
					</view>
				</scroll-view>

			</view>
		</uni-popup>
		<uni-popup ref="bj" bottom @change="change">
			<view class="pop-up">
				<view class="dis">
					<text @click="qx1">取消</text>
					<text class="tx1" @click="determine(1)">确定</text>
				</view>
				<scroll-view scroll-y="true" style="height: 585rpx;">
					<view class="list" :class="gradeKey==k?'listselect':''" v-for="(i,k) in bj" wx:key="k"
						@click="gradeKey = k">
						{{i.title}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="img" bottom>
			<view class="popimg" @click="gbimg">
				<img :src="'https://df.chitong.cn/uploads/' + imglist[1][imgkey].image" class="" @click="gbimg">
			</view>
		</uni-popup>
	</scroll-view>
</template>

<script>
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '点击报名',
				path: '/pages/index/index'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '点击报名',
				path: '/pages/index/index'
			}
		},
		data() {
			return {
				isUnder: false,
				curSchoolId: null,
				curGradeId: null,
				isPhoneDisable: false,
				show: false,
				// 获取数据
				imglist: ['', '', ''],
				vidoe: [],
				list: {
					name: '',
					id: '',
					jzname: '',
					mod: '',
					school: '',
					grade: '',
					classs: ''
				},
				certificate: '',
				isxy: false, //是否已阅读
				schoolList: [], //学校信息列表
				grade: [], // 年级报名费
				bj: [],
				gradeKey: null,
				islogin: '',
				vidoes: '',
				imgkey: '',
				pageHeight:0,
				scrollBoxHeight:0,
			}
		},
		onLoad() {
			// this.getSchoolList()
			this.getimgs()
			this.getvideo()
			this.islogin = uni.getStorageSync('access_token')
			// 起始
			this.pageHeight = uni.getWindowInfo().windowHeight + 'px';
			this.scrollBoxHeight = uni.getWindowInfo().windowHeight - 35 + 'px';
			console.log(this.pageHeight,'this.pageHeight');
			console.log(this.scrollBoxHeight,'this.scrollBoxHeight');
		},

		methods: {
			focus(e){
			     // 可用区域高度减去软键盘高度，最后加上px转为字符串
				this.pageHeight = uni.getWindowInfo().windowHeight - e.detail.height + 'px';
			    // 可用区域高度减去send盒子高度再减去软键盘高度，最后加上px转为字符串
				this.scrollBoxHeight = uni.getWindowInfo().windowHeight + 350 - e.detail.height + 'px';
			},
			// 失去焦点后
			blur(){
				this.pageHeight = uni.getWindowInfo().windowHeight + 'px';
				this.scrollBoxHeight = uni.getWindowInfo().windowHeight + 350 + 'px';
			},
			scrolltolower() {
				this.isUnder = true
			},
			scrolltoupper() {
				this.isUnder = false
			},
			change(e) {
				this.show = e.show
				console.log(e, 'eeeeeee');
			},
			phoneLogin(code) {
				this.$api.phonelogin({
					code
				}).then(ress => {
					uni.setStorage({
						data: ress.data.access_token,
						key: 'access_token'
					})
					uni.setStorage({
						data: ress.data.token_type,
						key: 'token_type'
					})
					this.login()
					this.islogin = uni.getStorageSync('access_token')
					console.log(this.islogin == '', '是否登录');
					uni.hideLoading();
					this.isPhoneDisable = false
				})
			},
			codeGetOpenId(code) {
				this.$api.code2session({
					code
				}).then(res => {
					console.log(res, 'openID获取成功');
				})
			},
			// 获取手机号
			decryptPhoneNumber(res) {
				console.log(res, '');
				if (res.detail.errMsg == "getPhoneNumber:ok") {
					let than = this
					uni.showLoading({
						title: '手机号获取中'
					});
					than.isPhoneDisable = true
					than.phoneLogin(res.target.code)
					// than.codeGetOpenId(res.target.code)
				} else {
					uni.showToast({
						title: '用户拒绝',
						duration: 1000,
						icon: 'error'
					});
				}

			},
			// 看协议
			gotx(key) {
				uni.navigateTo({
					url: '/pages/index/pay?key=' + key
				})
			},
			// 提示
			prompt(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
				})
			},
			login() {
				let than = this
				wx.login({
					provider: 'weixin', //使用微信登录
					onlyAuthorize: true,
					success: function(res) {
						console.log(res);
						than.codeGetOpenId(res.code)
						// than.$api.login({
						// 	code: res.code
						// }).then(ress => {})
					}
				});
			},
			// 支付
			gopay() {
				let is = 0
				let than = this
				this.list.name == '' ? this.prompt('未填写学生姓名') : is++;
				this.list.id == '' ? this.prompt('未填写学生身份证号') : is++;
				this.list.jzname == '' ? this.prompt('未填写家长姓名') : is++;
				this.list.mod == '' ? this.prompt('未填写联系方式') : is++;
				this.list.school == '' ? this.prompt('未填写学生学校') : is++;
				this.list.grade == '' ? this.prompt('未填写学生年级') : is++;
				this.list.classs == '' ? this.prompt('未填写学生班级') : is++;
				!this.isxy ? this.prompt('未阅读协议') : is++;
				if (is == 8) {
					console.log(this.grade,'this.grade[this.gradeKey]');
					this.$api.getuser().then(res => {
						var list = {
							grade_id: this.curGradeId,
							// school_id: this.curSchoolId,
							pay_amount: this.bj[this.gradeKey].price,
							name: this.list.name,
							number: this.list.id,
							jiazhang_name: this.list.jzname,
							jiazhang_phone: this.list.mod,
							school: this.list.school,
							nianji: this.list.grade,
							banji: this.list.classs,
							image: this.certificate
						}
						than.$api.signup(list).then(ress => {
							than.$api.pay('', ress.data.order_no).then(r => {
								console.log(r, '参数');
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: r.data.pay_info.timeStamp,
									nonceStr: r.data.pay_info.nonceStr,
									package: r.data.pay_info.package,
									signType: r.data.pay_info.signType,
									paySign: r.data.pay_info.paySign,
									success: function(res) {
										than.$api.wxpay({
											order_no: ress.data.order_no
										}).then(rs => {
											this.prompt('支付成功')
										})
										console.log('ga');
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});

							})


						})
					})

				}

				// console.log(list);
			},
			// 图片上传
			updata() {
				let than = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://df.chitong.cn/api/public/images/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								than.certificate = JSON.parse(uploadFileRes.data).data
								console.log(JSON.parse(uploadFileRes.data));
							}
						});
					}
				});
			},
			// 获取数据
			getimgs() {
				this.$api.getimg('', 0).then(res => {
					this.imglist[0] = res.data.images
					this.$forceUpdate()
				})
				this.$api.getimg('', 1).then(res => {
					this.imglist[1] = res.data.images
					this.$forceUpdate()
				})
				this.$api.getimg('', 2).then(res => {
					this.imglist[2] = res.data.images
					// console.log(this.imglist[2], '22222');
					this.$forceUpdate()
				})

			},
			getvideo() {
				this.$api.getvideo().then(res => {
					this.vidoe = res.data.videos[0]
				})
			},
			// 获取学校列表
			getSchoolList() {
				this.$api.getSchoolList().then(res => {
					// console.log(res,'学校：：');
					this.schoolList = res.data.schools
					console.log(this.schoolList, '年级');
				})
			},
			// 报名费 年级
			getgrade(id) {
				this.$api.usergrade('', id).then(res => {
					this.grade = res.data.grades
					console.log(this.grade, '年级');
				})
			},
			// 班级
			getclass(id) {
				let than = this
				this.$api.getclass('', id).then(res => {
					this.bj = res.data.gradeclasss
					console.log(this.bj, '班级');
				})
			},
			// 图片放大
			climg(k) {
				this.imgkey = k
				console.log(this.imgkey);
				this.$refs.img.open('top')
			},
			gbimg() {
				this.$refs.img.close('top')
			},
			// 确定
			determine(id) {
				if (id == 2) {
					this.list.school = this.schoolList[this.gradeKey].title
					this.curSchoolId = this.schoolList[this.gradeKey].id
					this.getgrade(this.curSchoolId)
					this.list.grade = ''
					this.list.classs = ''
					this.qx2()
				} else if (id == 0) {
					this.list.grade = this.grade[this.gradeKey].title
					this.curGradeId = this.grade[this.gradeKey].id
					this.getclass(this.curGradeId)
					this.list.classs = ''
					this.qx()
				} else {
					this.list.classs = this.bj[this.gradeKey].title
					this.$refs.bj.close()
				}
				// id == 0 ? (this.list.grade = this.grade[this.gradeKey].title, this.getclass(this.gradeKey + 1), this.list
				// 	.classs = '', this.qx()) : ''
				// id == 1 ? (this.list.classs = this.bj[this.gradeKey].title, this.$refs.bj.close()) : ''
			},
			open(id) {
				// 判断 必须先填学校再填年纪最后填班级
				if (this.list.school == '' && id != 2) {
					this.prompt('未填写学校')
					if (this.list.grade == '' && id != 0) {
						this.prompt('未填写年级')
					}
				}
				if (id == 2) {
					this.getSchoolList()
					this.$refs.school.open('top')
				} else if (id == 0 && this.list.school != '') {
					this.getgrade(this.curSchoolId)
					this.$refs.popup.open('top')
				} else if (id == 1 && this.list.grade != '') {
					this.getclass(this.curGradeId)
					this.$refs.bj.open('top')
				}
			},
			qx() {
				this.$refs.popup.close()
			},
			qx1() {
				this.$refs.bj.close()
			},
			qx2() {
				this.$refs.school.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.down {
		position: fixed;
		bottom: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		>image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.topimg {
		width: 750rpx;
		// height: 1500rpx;
	}

	#myVideo {
		width: 710rpx;
		height: 400rpx;
	}

	.contents {
		margin: 20rpx;
	}

	.list {
		>img {
			width: 350rpx;
			height: 230rpx;
			margin: 10rpx 0rpx;
		}

		>img:nth-child(2n-1) {
			margin-right: 10rpx;
		}
	}

	.popimg {
		width: 100%;
		height: 100vh;

		>img {
			display: block;
			margin: 300rpx auto;
			width: 710rpx;
			height: 530rpx;
		}

	}

	.table {
		padding-top: 100rpx;
		width: 710rpx;
		height: 2000rpx;
		background-repeat: no-repeat;
		position: relative;

		.gaga {
			position: absolute;
			z-index: -1;
			top: -0rpx;

			>img {
				width: 710rpx;
				height: 2000rpx;
			}

		}

		.ta {
			margin: 0rpx 55rpx;

			.tx {
				padding-left: 15rpx;
				font-weight: 500;
			}

			.txx {
				color: red;
			}

			// 证件
			.txs {
				color: #999999;
			}

			.txtj {
				font-size: 28rpx;
			}

			.zj {
				margin: 20rpx 0rpx 60rpx;
				width: 330rpx;
				height: 240rpx;
			}

			// 输入框
			.inp {
				margin: 20rpx 0rpx 30rpx;
				padding: 20rpx;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				color: #999999;

				>input {
					font-size: 28rpx;
				}
			}

		}

		.clause {
			font-size: 28rpx;

			>img {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
			}

			.tx1 {
				margin-left: 20rpx;
				color: #999999;
			}

			.tx2 {
				color: #F39A0E;
			}
		}

		.but {
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #FDD996;
			text-align: center;
			border-radius: 10rpx;
			background: linear-gradient(0deg, #FF8624, #FEBF51);
			margin: 18rpx auto;
		}

		.btn {
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: rgba(25, 156, 52, 1);
			text-align: center;
			border-radius: 10rpx;
			background: linear-gradient(0deg, rgb(137, 217, 97), rgba(137, 217, 97, .5));
			margin: 18rpx auto;
		}

		.comment {
			text-align: center;
			color: #999999;
			font-size: 24rpx;
		}
	}

	.bottoms {
		margin: 60rpx 10rpx;
		text-align: center;

		.top {
			color: #333333;
			font-size: 28rpx;
		}

		.top1 {
			display: inline-block;
			padding-top: 20rpx;
		}

		.imgs {
			margin-top: 60rpx;

			>img {
				width: 220rpx;
				height: 270rpx;
			}

			>img:nth-child(2) {
				margin: 0rpx 20rpx;
				width: 220rpx;
			}
		}
	}

	.all {
		margin: 60rpx 0rpx 0rpx;
		padding-bottom: 60rpx;
		font-size: 28rpx;
		color: #999999;
		text-align: center;

		.tx {
			display: inline-block;
			margin-top: 15rpx;
		}
	}

	.pop-up {
		margin-top: 500rpx;
		height: 100vh;
		width: 100%;
		background: #FFFFFF;
		border-radius: 30px 30px 0px 0px;
		padding-bottom: 20rpx;
		position: fixed;
		left: 0px;

		.tx1 {
			color: #F39A0E;
		}

		.dis {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 30rpx;
			border-bottom: #e9edf0 1rpx solid;
			margin: 0px 20rpx;

		}

		.list {
			margin: 0px 20rpx;
			padding: 35rpx 0rpx;
			text-align: center;
			border-bottom: #e9edf0 1rpx solid;
		}

		.listselect {
			color: #F39A0E;
		}
	}
</style>